<!DOCTYPE html>
<html lang="en" ng-app="FMApp">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="/static/app/images/favicon.ico" >
		<link rel="icon" href="/static/app/images/favicon.ico">
		<title>Dou FM</title>	

		<!---bootstrap-->
		<link href="/static/app/styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<!---bootstrap end-->

		<!---GoogleNexus-->
		<link rel="stylesheet" type="text/css" href="/static/app/vender/GoogleNexus/css/normalize.css"/>
		<link rel="stylesheet" type="text/css" href="/static/app/vender/GoogleNexus/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="/static/app/vender/GoogleNexus/css/component.css"/>
		<!---GoogleNexus end-->

		<!---jplayer-->
		<link href="/static/app/vender/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css"/>
		<!---jplayer end-->

		<!---my css-->
		<link href="/static/app/styles/style.css" rel="stylesheet" type="text/css" />
		<link href="/static/app/styles/music-player.css" rel="stylesheet" type="text/css" />
		<!---my css end-->
		
	</head>
	<body ng-controller="FMCtrl">
		<!-- nav bar -->
		<nav>
			<ul id="gn-menu" class="gn-menu-main">
				<li id="nav-trigger" class="gn-trigger">
					<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
					<nav class="gn-menu-wrapper">
						<div class="gn-scroller">
							<ul class="gn-menu">
								<li ng-repeat="list in lists"><a class="gn-icon gn-icon-earth" ng-click="clickList('{{ list.key }}', '{{ list.name}}')">{{ list.name }}</a></li>
							</ul>
						</div><!-- /gn-scroller -->
					</nav>
				</li>
				
	 			<!-- 登录 -->
	 			<li id="loginBar"><a href="#" data-target="#login" data-toggle="modal">登 录</a></li>
				<!-- 注册	 -->
        		<li id="regBar"><a href="#" data-target="#register" data-toggle="modal">注 册</a></li>
	    		<!-- current channel -->
	 			<li id="currentChannel" style="padding-right: 140px;"><img src="/static/app/images/channel_icon.gif"/><span>{{ currentChannel }}</span></li>
			</ul>
		</nav>
		<!-- nav bar end-->

		<!--  login window -->
		<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户登录</h4>
		      </div>
		      <div class="modal-body" style="text-align: center;">
		        <form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="login_name" class="col-sm-3 control-label">用户名</label>
				    <div class="col-sm-6">
				      <input type="email" class="form-control" id="login_name" placeholder="请输入用户名">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="login_password" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
				    <div class="col-sm-6">
				      <input type="password" class="form-control" id="login_password" placeholder="请输入密码">
				    </div>
				  </div>
				</form>
		      </div>
		      <div class="modal-footer" style="text-align: center;">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" ng-click="login()">登录</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<!--  register window -->
		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title" id="myModalLabel">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户注册</h4>
		      </div>
		      <div class="modal-body" style="text-align: center;">
		        <form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="username" class="col-sm-3 control-label">用户名</label>
				    <div class="col-sm-6">
				      <input type="email" class="form-control" id="username" placeholder="请输入用户名">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="password" class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
				    <div class="col-sm-6">
				      <input type="password" class="form-control" id="password" placeholder="请输入密码">
				    </div>
				  </div>
				   <div class="form-group">
				    <label for="password2" class="col-sm-3 control-label">确认密码</label>
				    <div class="col-sm-6">
				      <input type="password" class="form-control" id="password2" placeholder="请确认密码">
				    </div>
				  </div>
				</form>
		      </div>
		      <div class="modal-footer" style="text-align: center;">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		        <button type="button" class="btn btn-primary" ng-click="reg()">注册</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->
    	<!--  register window -->

		<section id="content">
			<header>
				<h1>Dou音乐, 爱生活</h1>
			</header>
			<article>
				<p>这是一个部署在校内的音乐服务器</p>
		    	<p>在这里听歌是不计外网流量的~</p>
				<p><a href="#">关于DouFM，关于我们</a></p>
				</br>
				<p>建议使用 Chrome 浏览器以获得最佳用户体验</p>
				<span>Powered By <a href="https://github.com/dccrazyboy/wang_fm" target="_blank">wang_fm</a></span></br>
				<span>意见或建议：<a href="mailto:admin@doufm.info">admin@doufm.info</a></span>
			</arttcle>
		</section>

		<section id="musicPanel">
			<!---musicPanel-->
			<div id="jquery_jplayer_1" class="jp-jplayer"></div>        
	    	<div id="jp_container_1"> 
		    	<div id="jp-cover"><img/></div>
        		<div class="jp-audio">
        			<!-- ex-problem because conflict of ex-id 'jp-share' -->
        			<div id="jp-shared" data-target="#share" data-toggle="modal"><a href="#" data-toggle="tooltip" title="分享给好友!"><img src="/static/app/images/share1.png"></a></div>
        			<!-- trash button here -->
        			<div id="jp-trash"><a href="#" data-toggle="tooltip" title="dislike" ng-click="dislike()"><img src="/static/app/images/trash2.png" /></a></div>

        			<!-- favorite button here -->
        			<div id="jp-favorite"><a href="#" data-toggle="tooltip" title="favorite" ng-click="like()"><img src="/static/app/images/favorite2.png" /></a></div>

        			<!--  share window -->
					<div class="modal fade" id="share" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  <div class="modal-dialog">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					        <h4 class="modal-title" id="myModalLabel">分享给好友</h4>
					      </div>
					      <div class="modal-body">
					      	<div id="shareMsg" class="alert alert-info"></div>
					      	<div>歌曲信息已经复制到剪切板，与朋友分享吧～</div>
					      </div>
					    </div><!-- /.modal-content -->
					  </div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
			    	<!--  share window -->

			    	<!--  share ended window -->
					<div class="modal fade" id="shareEnd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  <div class="modal-dialog">
					    <div class="modal-content">
					      <div class="modal-header">
					        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					        <h4 class="modal-title" id="myModalLabel">播放完毕</h4>
					      </div>
					      <div class="modal-body">
					      	<div class="alert alert-info">这首歌曲已经收听完毕，想要收听更多吗？</div>
					      </div>
					      <div class="modal-footer">
					        <button type="button" class="btn btn-default" data-dismiss="modal"onclick="javascript:window.opener = null;window.open('', '_self');window.close();">离开这儿</button>
					        <button type="button" class="btn btn-primary" onclick="javascript:window.location.href='http://' + window.location.host;">去主页瞧瞧~</button>
					      </div>
					    </div><!-- /.modal-content -->
					  </div><!-- /.modal-dialog -->
					</div><!-- /.modal -->
			    	<!--  share ended window -->

	            	<div id="jp-singer"></div>   
	            	<div id="jp-nameAlbum"><marquee id="nameAlbum"scrollamount="2"  behavior="scroll" hspace="6" onMouseOut="this.start()" onMouseOver="this.stop()"></marquee></div>

	            	<div class="jp-type-playlist">
                		<div class="jp-gui jp-interface">
	                		<ul class="jp-controls">
			                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
			                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
		                    	<li><a href="javascript:;" class="jp-next" tabindex="1" id="jp-next" ng-click="clickNext()">next</a></li>
			                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
			                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
			                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
		                  	</ul>
	                		<div class="jp-progress">
                    			<div class="jp-seek-bar">
                     				<div class="jp-play-bar"></div>
                    			</div>
	                		</div>
	                		<div class="jp-volume-bar">
                    			<div class="jp-volume-bar-value"></div>
	                		</div>
			                <div class="jp-time-holder">
			                  	<div class="jp-current-time"></div>
		                    	<div class="jp-duration"></div>
	                		</div>

		                    <ul class="jp-toggles" style="visibility:hidden">
		                      	<li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
		                      	<li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
		                      	<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
		                      	<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
		                    </ul>
		                </div>
		            </div>
		    	</div>    
		    </div>
			<div class="clear"></div>

			<div id="recentTenSongs">
				<ul class="thumb">
					<li><a href="#" ng-click="clickCover(0)"><img ng-src="{{ musics[0].cover }}" alt="{{musics[0].album}}- {{musics[0].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(1)"><img ng-src="{{ musics[1].cover }}" alt="{{musics[1].album}}- {{musics[1].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(2)"><img ng-src="{{ musics[2].cover }}" alt="{{musics[2].album}}- {{musics[2].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(3)"><img ng-src="{{ musics[3].cover }}" alt="{{musics[3].album}}- {{musics[3].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(4)"><img ng-src="{{ musics[4].cover }}" alt="{{musics[4].album}}- {{musics[4].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(5)"><img ng-src="{{ musics[5].cover }}" alt="{{musics[5].album}}- {{musics[5].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(6)"><img ng-src="{{ musics[6].cover }}" alt="{{musics[6].album}}- {{musics[6].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(7)"><img ng-src="{{ musics[7].cover }}" alt="{{musics[7].album}}- {{musics[7].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(8)"><img ng-src="{{ musics[8].cover }}" alt="{{musics[8].album}}- {{musics[8].artist}}" /></a></li>
					<li><a href="#" ng-click="clickCover(9)"><img ng-src="{{ musics[9].cover }}" alt="{{musics[9].album}}-{{musics[9].artist}}" /></a></li>
				</ul>
			</div>
			<!---musicPanel end-->
		</section>
		<script src="/static/app/vender/GoogleNexus/js/modernizr.custom.js"></script>
		<script src="/static/app/vender/GoogleNexus/js/classie.js"></script>
		<script src="/static/app/vender/GoogleNexus/js/gnmenu.js"></script>	
		<script>
			new gnMenu( document.getElementById( 'gn-menu' ) );
		</script>
		<!---JS-->
		<script type="text/javascript" src="/static/app/vender/jquery.min.js"></script>
		<script type="text/javascript" src="/static/app/vender/jquery.zclip.js"></script>
		<script type="text/javascript" src="/static/app/vender/zoomer.js"></script>
		<script type="text/javascript" src="/static/app/vender/bootstrap.min.js"></script>
		<!---angularJS -->
		<script type="text/javascript" src="/static/app/vender/angularJS/angular.js"></script>
		<script type="text/javascript" src="/static/app/vender/angularJS/angular-route.js"></script>
		<script type="text/javascript" src="/static/app/vender/angularJS/angular-cookies.min.js"></script>
		<script type="text/javascript" src="/static/app/vender/angularJS/angular-resource.min.js"></script>
		<!---angularJS -->

		<!---my JS -->
		<script type="text/javascript" src="/static/app/scripts/controllers.js"></script>
		<script type="text/javascript" src="/static/app/scripts/services.js"></script>
		<!---my JS -->

		<script type="text/javascript" src="/static/app/vender/jPlayer/js/jquery.jplayer.js"></script>
		<script type="text/javascript" src="/static/app/vender/jPlayer/js/jplayer.playlist.min.js"></script>
		<!---JS-->
		<script type="text/javascript">
</script>
	<!-- </script> -->
	</body>
</html>

